<template>
  <div id="editor">
  </div>
</template>
<script>
import E from 'wangeditor'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
import {getToken} from "@/utils/auth";
import {uploadEditorImgs, getFile,getTempToken} from "@/api/files/file";
import {Message} from "element-ui";

export default {
  name: 'WangEditor',
  components: {},
  props: {
    value: {
      type: String,
      default: ''
    },

  },

  data() {
    return {
      editor: null,
    }
  },

  mounted() {
    this.initEditor()
  },
  beforeDestroy() {
    this.editor.destroy()
  },
  methods: {
    // 初始化富文本编辑器
    initEditor() {
      this.editor = new E('#editor')
      // 设置参数
      this.editor.highlight = hljs //代码高亮
      // 图片配置
      this.editor.config.uploadImgServer = process.env.VUE_APP_BASE_API + '/file/upload/editor'

      this.editor.config.uploadImgHeaders = {
        'Authorization': getToken()
      }
      this.editor.config.uploadImgParams = {
        'type': 'img'
      }

      this.editor.img
      this.editor.config.uploadFileName = 'file'


      this.editor.config.uploadImgHooks.customInsert = (insertFn,result, editor ) => {
        console.log('开始插入图片')
        let ids = [];
        result.data.forEach(item => {
          const parts = item.url.split('/');
          if (parts.length > 0) {
            const id = parts[parts.length - 1];
            ids.push(id);
          }
        })

        //从后端获取临时访问链接
        getTempToken(ids.join(',')).then(res => {
          if(res.code === 200){
            res.data.forEach(file => {
              console.log('file', file)
              insertFn(file.fileUrl)
            });
          } else {
            Message.error(res.msg || '文件上传失败');
          }

        })
      }




      // 上传音视频
      this.editor.config.uploadVideoAccept = ['mp4','MP4']
      this.editor.config.uploadVideoServer = process.env.VUE_APP_BASE_API + '/file/upload/editor'
      // console.log('process.env.VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
      this.editor.config.uploadVideoHeaders = {
        'Authorization': getToken()
      }

      this.editor.config.uploadVideoParams = {
        'type': 'video'
      }
      this.editor.config.uploadVideoName = 'file'

      this.editor.config.uploadVideoHooks.customInsert = (insertFn, result, editor) => {
        console.log('开始插入视频')
        console.log('========insertFn', insertFn)
        console.log('========result', result)
        let id = result.data.url.split('/');
        id = id[id.length - 1]
        console.log('========id', id)
        //从后端获取临时访问链接
        getTempToken(id).then(res => {
          console.log('========res', res)
          if(res.code === 200){
            res.data.forEach(file => {
              console.log('file', file)
              insertFn(file.fileUrl)
            });
          } else {
            Message.error(res.msg || '文件上传失败');
          }

        })
      }


      this.editor.create()
    },

    // 获取内容
    getContent() {

      return this.editor.txt.html()
    },

    // 设置内容
    setContent(html) {
      this.editor.txt.html(html)
    }
  }
}

</script>
<style></style>
